<template>

    <div class="banklist">
        <van-nav-bar fixed left-text="返回" left-arrow :title="!isWeixin() ? '我的银行卡' : ''" @click-left="handleBack" />

        <div class="innner">
            <div class="have" v-if="cardList.length">
                <div class="cloum" v-for="(item, index) in cardList" :key="index" @click="handleSelectBank(item)">
                    <div class="left">
                        <img src="../../assets//images/Chips.png" alt="">
                    </div>
                    <div class="right">
                        <div class="name">{{ item.yinhang }}</div>
                        <div class="cardNo">{{ maskBankCard(item.bank) }}</div>
                    </div>
                    <div class="del" @click="handleDel(item)" v-if="!paramsquery">删除</div>
                </div>


            </div>
            <div class="none" v-else>
                <van-empty description="暂无银行卡" />
            </div>
        </div>

        <div class="footer">

            <div class="btn" @click="handleGoadd">添加银行卡</div>
        </div>


    </div>
</template>

<script setup>
import { isWeixin, getCookie } from "@/utils/index";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { userbankApi, userbankdelApi } from '@/api/bank'
import { showConfirmDialog, showFailToast } from 'vant';
const router = useRouter();

const cardList = ref([])
const paramsquery = ref(router.currentRoute.value.query.from || '')
const handleBack = () => {
    if (history.state?.back) {
        router.back();
    } else {
        router.push("/user");
    }
};
const getcard = () => {
    userbankApi({ uid: getCookie('token') ? Number(getCookie('token')) : '', }).then((res) => {
        let data = res.data
        cardList.value = data
    })
}


const maskBankCard = (cardNumber) => {
    // 去除银行卡号中的非数字字符
    let numberOnly = cardNumber.replace(/\D/g, '');

    // 获取银行卡的长度
    let cardLength = numberOnly.length;

    // 根据银行卡类型在中间位置加星号
    let maskedCard = numberOnly.replace(/^(.{4})(.*)(.{4})$/, '$1 **** **** $3');

    // 对于特定的卡类型，如VISA/MASTERCARD，可以有不同的显示长度
    // 这里只是一个基础示例，根据实际需要调整

    // 返回加了空格的脱敏后的银行卡号
    return maskedCard.replace(/(.{4})/g, '$1 ').trim();
}

const handleDel = (data) => {
    showConfirmDialog({
        title: '提示',
        message:
            '确定删除当前银行卡吗？',
    })
        .then(() => {
            // on confirm
            let req = {
                id: data.id
            }
            userbankdelApi(req).then((res) => {
                if (res.code == 0) {

                    getcard()
                } else {
                    showFailToast(res.msg)
                }
            })
        })
        .catch(() => {
            // on cancel
        });
}

const handleSelectBank = (data) => {
    if (paramsquery.value) {
        localStorage.setItem('bank', JSON.stringify(data))
        router.back();
    }
}


const handleGoadd = () => {
    router.push('/bankadd')
}

getcard()


</script>

<style lang="scss" scoped>
@import url('./index.scss');
</style>